﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title></title>
    <link href="../src/css/rayui.css" rel="stylesheet" />
    <script src="../plugins/jquery-1.12.4.js"></script>
    <script src="../src/js/rayui.js"></script>
    <style>
        html, body {
            padding: 0;
            margin: 0;
        }

        body {
            padding: 20px;
        }

        .raytable td {
            text-align: center;
        }

            .raytable td:hover {
                background-color: #eee;
            }
        #formLoadingOpt0 span {
            margin-left: 5px;
        }
    </style>
</head>
<body>

    <a class="btn-link" href="#anchor">使用说明</a>
    <br /><br />
    <h4>旋转图标</h4>
    <table class="raytable">
        <tr>
            <td>
                <div>
                    <i class="ra layer-icon layer-loading-0"></i>
                </div>静态
            </td>
            <td>
                <div>
                    <i class="ra layer-icon layer-loading-0 ra-spin"></i>
                </div>顺时针
            </td>
            <td>
                <div>
                    <i class="ra layer-icon layer-loading-0 ra-spinr"></i>
                </div>逆时针
            </td>
            <td>
                <div>
                    <i class="ra layer-icon layer-loading-1"></i>
                </div>静态
            </td>
            <td>
                <div>
                    <i class="ra layer-icon layer-loading-1 ra-spin"></i>
                </div>顺时针
            </td>
            <td>
                <div>
                    <i class="ra layer-icon layer-loading-1 ra-spinr"></i>
                </div>逆时针
            </td>
        </tr>
    </table>


    <h4>图标组</h4>
    <table class="raytable">
        <tr>
            <td>
                <div>
                    <i class="ra layer-icon layer-icon-0"></i>
                </div>icon：0
            </td>
            <td>
                <div>
                    <i class="ra layer-icon layer-icon-1"></i>
                </div>icon：1
            </td>
            <td>
                <div>
                    <i class="ra layer-icon layer-icon-2"></i>
                </div>icon：2
            </td>
            <td>
                <div>
                    <i class="ra layer-icon layer-icon-3"></i>
                </div>icon：3
            </td>
            <td>
                <div>
                    <i class="ra layer-icon layer-icon-4"></i>
                </div>icon：4
            </td>
            <td>
                <div>
                    <i class="ra layer-icon layer-icon-5"></i>
                </div>icon：5
            </td>
        </tr>
        <tr>
            <td>
                <div>
                    <i class="ra layer-icon layer-icon-20"></i>
                </div>icon：20
            </td>
            <td>
                <div>
                    <i class="ra layer-icon layer-icon-21"></i>
                </div>icon：21
            </td>
            <td>
                <div>
                    <i class="ra layer-icon layer-icon-22"></i>
                </div>icon：22
            </td>
            <td>
                <div>
                    <i class="ra layer-icon layer-icon-23"></i>
                </div>icon：23
            </td>
            <td>
                <div>
                    <i class="ra layer-icon layer-icon-24"></i>
                </div>icon：24
            </td>
            <td>
                <div>
                    <i class="ra layer-icon layer-icon-25"></i>
                </div>icon：25
            </td>
        </tr>
    </table>

    <h4>alert 组</h4>
    <a class="rayui-btn btn-2x" id="alertBtn0">你好，rayui</a>
    <a class="rayui-btn btn-2x" id="alertBtn1">内容超出范围，遮罩可以关闭</a>
    <a class="rayui-btn btn-2x" id="alertBtn2">多个按钮，都有颜色</a>
    <a class="rayui-btn btn-2x" id="alertBtn3">多个按钮，第二个开始无颜色</a>


    <h4>msg 组</h4>
    <a class="rayui-btn btn-2x" id="msgBtn0">2秒自动关闭</a>
    <a class="rayui-btn btn-2x" id="msgBtn1">图标在上面</a>
    <a class="rayui-btn btn-2x" id="msgBtn2">遮罩透明</a>

    <div class="hidden layerdiv">
        <p>你好，点击遮罩也可以关闭</p>
        <p>你好，rayui</p>
        <p>你好，rayui</p>
        <p>你好，rayui</p>
        <p>你好，rayui</p>
        <p>你好，rayui</p>
        <p>你好，rayui</p>
        <p>你好，rayui</p>
        <p>你好，rayui</p>
        <p>你好，rayui</p>
    </div>

    <h4>confirm 组</h4>
    <a class="rayui-btn btn-2x" id="confirmBtn0">嘿，我好不好？</a>
    <a class="rayui-btn btn-2x" id="confirmBtn1">我有不同的图标</a>


    <h4>prompt 组</h4>
    <a class="rayui-btn btn-2x" id="promptBtn0">确认输入框</a>
    <a class="rayui-btn btn-2x" id="promptBtn1">移除html滚动条</a>

    <h4>loading 组</h4>
    <a class="rayui-btn btn-2x" id="loadingBtn0">loading样式0</a>
    <a class="rayui-btn btn-2x" id="loadingBtn1">loading样式0参数</a>
    <a class="rayui-btn btn-2x" id="loadingBtn2">loading样式0带提示</a>
    <a class="rayui-btn btn-2x" id="loadingBtn3">loading样式0，图标在上方</a>

    <div id="loading0" style="width: 600px; display: none">
        <div class="loadingContainer" style="width: 300px; height: 200px; background-color: #c8c6c6; float: left;">
            <div style="width: 150px; height: 100px; position: relative; background-color: #0f0">便于查找中心点</div>
        </div>
        <div style="width: 300px; float: left; padding-left: 10px;">

            可选参数：<br />
            <form id="formLoadingOpt0">
                <label>lines(线条数量):</label><input type="range" name="lines" min="5" max="20" step="1" value="12"><span></span><br />
                <label>length(线条长度):</label><input type="range" name="length" min="5" max="50" step="1" value="8"><span></span><br />
                <label>lheight(线条宽度):</label><input type="range" name="lheight" min="1" max="10" step="1" value="2"><span></span><br />
                <label>radius(线条圆角):</label><input type="range" name="radius" min="0" max="50" step="1" value="10"><span></span><br />
                <label>rotate(距离圆点位置):</label><input type="range" name="rotate" min="3" max="50" step="1" value="3"><span></span><br />
                <label>speed(旋转速度):</label><input type="range" name="speed" min="0.2" max="2.2" step="0.1" value="1"><span></span><br />
                <label>direction(旋转方向):</label>
                <select name="direction">
                    <option value="1" selected="selected">顺时针</option>
                    <option value="-1">逆时针，非1数值</option>
                </select><span></span><br />
                <label>color(线条颜色):</label><input type="color" name="color" value="#000000"><span></span><br />
            </form>
            说明：赋值给layer的options.loadOpt0即可
        </div>
    </div>

    <div id="loadingBox">
        <a class="rayui-btn btn-2x" data-loading="1">loading样式1</a>
        <a class="rayui-btn btn-2x" data-loading="2">loading样式2</a>
        <a class="rayui-btn btn-2x" data-loading="3">loading样式3</a>
    </div>
    <a class="rayui-btn btn-2x" id="loadingBtn4">loading样式2，图标在上方</a>



    <h4>iframe 组</h4>
<a class="rayui-btn btn-2x" id="iframeBtn0">iframe弹窗</a>
<a class="rayui-btn btn-2x" id="iframeBtn1">iframe全屏弹窗</a>

    <h4>tips 组</h4>
    <div id="tipsBox">
        <div style="display: inline-block;padding-left: 100px">
            <a class="rayui-btn btn-2x" data-offset="2">tips弹窗-上</a><br />
            <a class="rayui-btn btn-2x" data-offset="4">tips弹窗-左</a><br />
            <a class="rayui-btn btn-2x" data-offset="6">tips弹窗-右</a><br />
            <a class="rayui-btn btn-2x" data-offset="8">tips弹窗-下</a><br />
        </div>
        <div style="display: inline-block;padding-left: 200px">
            <a class="rayui-btn btn-2x" data-offset="2" data-bgcolor="#f00000">tips弹窗(红色)-上</a><br />
            <a class="rayui-btn btn-2x" data-offset="4" data-bgcolor="#abe44b">tips弹窗(绿色)-左</a><br />
            <a class="rayui-btn btn-2x" data-offset="6" data-bgcolor="#34aaec">tips弹窗(蓝色)-右</a><br />
            <a class="rayui-btn btn-2x" data-offset="8" data-bgcolor="#c328c0">tips弹窗(紫色)-下</a><br />
        </div>
    </div>

    <h4>open 组</h4>
    <div id="openBox">
        <a class="rayui-btn btn-2x" data-offset="1">左上弹窗(offset=1)</a>
        <a class="rayui-btn btn-2x" data-offset="2">上中弹窗(offset=2)</a>
        <a class="rayui-btn btn-2x" data-offset="3">右上弹窗(offset=3)</a><br />
        <a class="rayui-btn btn-2x" data-offset="4">左中弹窗(offset=4)</a>
        <a class="rayui-btn btn-2x" data-offset="5">居中弹窗(offset=5)</a>
        <a class="rayui-btn btn-2x" data-offset="6">右中弹窗(offset=6)</a><br />
        <a class="rayui-btn btn-2x" data-offset="7">左下弹窗(offset=7)</a>
        <a class="rayui-btn btn-2x" data-offset="8">下中弹窗(offset=8)</a>
        <a class="rayui-btn btn-2x" data-offset="9">右下弹窗(offset=9)</a>
    </div>
    <div>
        <a class="rayui-btn btn-2x" id="openBoxCustom" data-offset="['200px','300px']">自定义top和left(offset=['200px','300px'])</a>
    </div>


    <script>
        rayui.use(["layer", "jqlibs"],
            function () {

                var $ = rayui.$,
                    layer = rayui.layer;

                /* open */
                $("#openBox a").click(function () {
                    var offset = parseInt($(this).data("offset"));
                    layer.open({
                        shade: false,
                        content: $(this).text(),
                        offset: offset,
                        minBtn: true,
                        btns: '关闭全部',
                        btn0: function () {
                            layer.closeAll();
                        }
                    });
                });
                $("#openBoxCustom").click(function () {
                    var offset = eval($(this).data("offset"));
                    layer.open({
                        shade: false,
                        content: $(this).text(),
                        offset: offset,
                        btns: '关闭',
                        btn0: function (index) {
                            layer.close(index);
                        }
                    });
                });


                /* tips */
                $("#tipsBox a").click(function () {
                    var offset = parseInt($(this).data("offset"));
                    layer.tips($(this).text(), $(this), {
                        offset: offset,
                        bgColor: $(this).data("bgcolor")
                    });
                });

                /* iframe */
                $("#iframeBtn0").click(function () {
                    layer.iframe({
                        title: "重新打开当前页面",
                        src: window.location.href + "?id=" + new Date(),
                        resize: true,
                        width: 600,
                        height: 400,
                        scrollbar: false
                    });
                });
                $("#iframeBtn1").click(function () {
                    layer.iframe({
                        title: "自动全屏",
                        src: window.location.href + "?id=" + new Date(),
                        resize: true,
                        full: true,
                        scrollbar: false
                    });
                });


                /* loading */
                $("#loadingBtn0").click(function () {
                    layer.loading({ time: 2000 });
                });
                $("#loadingBtn2").click(function () {
                    layer.loading({
                        time: 2000,
                        content: "加载中……", loadOpt0: {
                            length: 10,
                            rotate: 3
                        }
                    });
                });
                $("#loadingBtn3").click(function () {
                    layer.loading({
                        time: 2000,
                        offset: 2,//上方图标
                        content: "加载中……",
                        loadOpt0: {
                            length: 10,
                            rotate: 3
                        }
                    });
                });


                var indexInner;
                $("#loadingBtn1").click(function () {
                    layer.open({
                        content: "#loading0",
                        resize: true,
                        maxBtn: true,
                        scrollbar: false,
                        title: "loading0参数",
                        maxWidth: 680,
                        maxHeight: 600,
                        onShow: function () {
                            var opt = $("#formLoadingOpt0").serializeJson();
                            indexInner = layer.loading({ container: '.loadingContainer', loadOpt0: opt });
                        },
                        onClose: function () {
                            layer.close(indexInner);
                        }
                    });
                });
                $("#formLoadingOpt0").find("input,select").each(function () {
                    $(this).next().html($(this).val());
                });
                $("#formLoadingOpt0").find("input,select").change(function () {
                    var opt = $("#formLoadingOpt0").serializeJson();
                    $(this).next().html($(this).val());
                    layer.close(indexInner);
                    indexInner = layer.loading({ container: '.loadingContainer', loadOpt0: opt });
                });

                $("#loadingBox a").click(function () {
                    var icon = $(this).data("loading");
                    layer.loading({ time: 2000, icon: icon });
                });


                $("#loadingBtn4").click(function () {
                    layer.loading({
                        time: 2000,
                        content: "加载中……",
                        icon: 2
                    });
                });




                /* prompt */
                $("#promptBtn0").click(function () {
                    layer.prompt("请输入姓名",
                        { ptype: 0 },
                        function (index, input) {
                            layer.close(index);
                            layer.prompt("请输入密码",
                                { ptype: 1 },
                                function (index2, input2) {
                                    layer.close(index2);
                                    layer.prompt("请输入文本",
                                        { ptype: 2 },
                                        function (index3, input3) {
                                            layer.close(index3);
                                            var str = [];
                                            str.push("您输入的姓名是：" + input + "<br/>");
                                            str.push("您输入的密码是：" + input2 + "<br/>");
                                            str.push("您输入的文本是：" + input3 + "<br/>");
                                            layer.alert(str.join(''),
                                                { icon: 0, title: false, btns: false, shadeClose: true });
                                        });
                                });
                        });
                });

                $("#promptBtn1").click(function () {
                    layer.prompt("请输入姓名", { ptype: 0, scrollbar: false });
                });


                /* confirm */
                $("#confirmBtn0").click(function () {
                    layer.confirm("嘿，我好不好？",
                        { icon: 2, btns: ["好", "不好"] },
                        function (index) {
                            layer.alert("谢谢", { icon: 0, title: false, btns: false, shadeClose: true });
                            layer.close(index);
                        },
                        function (index) {
                            layer.alert("我会更加努力的", { icon: 1, title: false, btns: false, shadeClose: true });
                            layer.close(index);
                        });
                });

                $("#confirmBtn1").click(function () {
                    layer.confirm("给我好评好吗？", { icon: 22, btns: ["好评", "再看看"] });
                });


                /* msg */
                $("#msgBtn0").click(function () {
                    layer.msg("你好，rayui", { icon: 0, time: 2000 });
                });

                $("#msgBtn1").click(function () {
                    layer.msg("你好，rayui", { icon: 0, iconAlign: 'top', shadeClose: true });
                });

                $("#msgBtn2").click(function () {
                    layer.msg("你好，rayui", { icon: 0, iconAlign: 'top', shadeClose: true,shadeOpacity: .01 });
                });


                /* alert */
                $("#alertBtn0").click(function () {
                    layer.alert("你好，rayui",
                        { title: "系统提示", minBtn: true, maxBtn: true, resize: true },
                        function (index) {
                            alert(index);
                        });
                });

                $("#alertBtn1").click(function () {
                    layer.alert($(".layerdiv"), { shadeClose: true });
                });

                $("#alertBtn2").click(function () {

                    layer.alert("你好，我有多个按钮",
                        {
                            resize: true,
                            btns: ["按钮1", "按钮2", "按钮3", "按钮4", "按钮5", "按钮6", "按钮7", "按钮8", "按钮9", "按钮10", "按钮11"],
                            btnAlign: "center",
                            btnNoColor: 999,
                            btn1: function (index) {
                                alert("我是第2个按钮");
                            }
                        });

                });

                $("#alertBtn3").click(function () {

                    layer.alert("你好，rayui，我有多个按钮",
                        {
                            resize: true,
                            btns: ["按钮1", "按钮2", "按钮3", "按钮4", "按钮5", "按钮6", "按钮7", "按钮8", "按钮9", "按钮10", "按钮11"],
                            btnAlign: "center",
                            btnColor: 1, //表示第2个按钮不再添加颜色，从0开始
                            btn1: function (index) {
                                alert("我是第2个按钮");
                            }
                        });

                });

            });
    </script>

    <h4 id="anchor">使用说明</h4>
    <pre style="color: #159200; word-wrap: break-word; white-space: pre-wrap;">
layer属性：
title://标题
closeBtn: true,//是否显示关闭按钮
minBtn://是否显示最小化按钮，默认false
maxBtn://是否显示最大化按钮，默认false
offset: 123456789,[left, top]，数值对应9宫格，比如1左上2中上3右上5居中9右下
type: 0,//0（信息框，默认）1（iframe层）2（加载层）3（tips层）
icon: 图标
iconAlign: 'left',//图标位置，可选left|top
container: 容器
btnNoColor: 1, 数字，表示第btnColor+1个按钮开始不添加颜色，从0开始
btnAlign: "right",可选left|center|right
content: "",内容
minBtn:最小化按钮，可选true|false
maxBtn:最大化按钮，可选true|false
closeBtn:关闭按钮，可选true|false
zIndex: 10000,窗体堆叠顺序
maxWidth: 400，最大宽度
maxHeight: 300, 最大高度
full: false,//自动全屏
autoResize: true, //是否自适应窗体改变
resize: true,//是否允许改变大小
shade: true,//是否有遮罩
shadeOpacity: 0.3,//遮罩透明度
shadeClose: false,//点击遮罩是否关闭
shadow: true,//是否有阴影
scrollbar: true, //是否允许浏览器滚动条
loadOpt0:{
    rotate: 3, //距离圆点位置
    lines: 12, //线条数量
    length: 10, //线条长度
    lheight: 3, //线条宽度
    radius: 10, //线条圆角
    color: '#000', //线条颜色
    direction: 1,  //旋转方向，1顺时针，其他逆时针
    speed: 1  //旋转速度
}
onAddedBtn(btn, container):
onShow(box)：显示后触发，this为内部数据options，box为主体
onClose(index)：关闭前，return false阻止关闭


layer方法：
open: function (options)：核心函数
alert: function (msg, options|ok, ok)：弹窗提醒
msg: function (msg, options)：显示信息
confirm: function (msg, options|ok, ok|cancel, cancel)
prompt: function (title, options|ptype, ok, cancel)，ptype为数字类型，1密码2textarea 其他input，
                          ok函数，finction(index, input)，index为当前弹窗，input为输入的内容
loading: function (options)
iframe: function (options)
tips: function (content, elem, options)
close: function (index)
closeAll: function ()
full: function (index)：全屏




1、使用iframe方法时，icon为加载等待的样式，参数比较有限，如果想使用更多的加载等待参数，这里请把icon设置为-1，参考loading参数自己重新实现

    
  </pre>


</body>
</html>